<template>
	<div id="category">
		<div class="panel" v-for="items in theme">
			<h1>
				{{items}}
			</h1>
			<div class="panelist"f>
				<div class="panelitems" v-for="item in cates">
					<div class="panelitem">
						1
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:"Category",
		data(){
			return {
				theme:['讲章','讲章精选','节日讲章','专题讲章','教牧资源'],
				cates:[{'讲章':[]},'讲章精选','节日讲章','专题讲章','教牧资源']
			}
		}
	}
</script>

<style scoped="scoped">
	.panel{
		width: 98%;
		margin-bottom: 30px;
		margin: 0 auto;
	}
	.panelist{
		display: flex;
		width: 100%;
		height: 60px;
		flex-wrap: wrap;
		justify-content:space-around;
	}
	.panelitems{
		background-color: #008A00;
		display: flex; 
		margin-right: 20px;
		height: 60px;
		width: 30%;
	}
	.panelitem{
	}
</style>
